import React, { useEffect } from 'react';
import {UserAPI} from '../utils';
import {Link} from 'react-router-dom';
function UserList(){
    //定义一个状态，用于保存用户列表
    let [users,setUsers] = React.useState([]);
    //编写一个副作用函数，它只会组件渲染之后执行一次
    useEffect(()=>{
        //调用接口获取用户列表
        let users = UserAPI.list();
        //然后用得到的用户列表更新users状态
        setUsers(users);
    },[]);
    return (
        <ul>
            {
                users.map((user)=>(
                    <li key={user.id}>
                        <Link 
                        to={`/user/detail/${user.id}`} 
                        state={user}>{user.username}</Link>
                    </li>
                ))
            }
        </ul>
    )
}
export default UserList;